<!--
 * @author  dumeng
 调查问卷列表页
 -->
<template>
  <section class="survey-main">
    <el-collapse-transition>
      <section v-show="searchshow" class="main-search merge">
        <span class="svg-container">
          <svg-icon icon-class="search" />
        </span>
        <el-input v-model.trim="listQuery.name" placeholder="输入名称搜索" class="search-input" @keyup.enter.native="handleFilter" />
        <section class="search-btn">
          <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </section>
      </section>
    </el-collapse-transition>
    <section class="main-buttons">
      <section class="main-buttons-title">
        <span>活动上传记录</span>
      </section>
    </section>
    <section class="main-table">
      <v-table
        :list="list"
        tag="zjjl"
        :source-arr="['coverImgId']"
        :list-loading="listLoading"
        :filter-column="filtercolumn"
        :selection="false"
      >
      <!--   <el-table-column label="操作" fixed="right" align="center" min-width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" @click="deleteSurvey(scope.row.id)">删除</el-button>
          </template>
        </el-table-column> -->
      </v-table>
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </section>
    <preview v-if="previewStatus" :id="obj.id" @closeSet="previewStatus = false" />
  </section>
</template>
<script>
import Pagination from '@/components/Pagination'
import VTable from '@/components/Table'
import { getDictByCode, recordQueryPage } from '../api/index'
import permission from '@/directive/permission/index.js'
import Preview from '../components/Preview'
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  name: 'SurveyMain',
  components: { Pagination, VTable, Preview },
  directives: { permission, elDragDialog },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        name: ''
      },
      searchshow: true,
      search: {
        name: '',
        openRange: '',
        status: ''
      },
      list: [],
      total: 0,
      listLoading: false,
      dict: {
        GIPSTSTUS: [],
        WJKFFW: []
      },
      view: '/API-DOCUMENT/document/file/download?id=',
      link: '/survey?i=',
      previewStatus: false,
      obj: {},
      form: {},
      sortDialog: false
    }
  },
  created() {
    for (const i in this.dict) {
      this.getDict(i)
    }
    this.getList()
  },
  methods: {
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code)
          .then(response => {
            this.dict[code] = response.data.data[0].list
            resolve()
          })
          .catch(error => {
            reject(error)
          })
      })
    },
    filtercolumn(scope, item) {
      if (item === 'coverImgId') {
        return this.view + scope.row[item]
      } else {
        return scope.row[item]
      }
    },

    handleReset() {
      this.listQuery.page = 1
      this.listQuery.name = ''
      for (const i in this.search) {
        if (this.search['' + i + ''] instanceof Array) {
          this.search['' + i + ''] = []
        } else {
          this.search['' + i + ''] = ''
        }
      }
      this.getList()
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      if (this.searchshow) {
        query['name'] = this.listQuery.name
      } else {
        query['name'] = this.search.name
        query['openRange'] = this.search.openRange
        query['status'] = this.search.status
        query['startTime'] = ''
        query['endTime'] = ''
      }
      return new Promise((resolve, reject) => {
        recordQueryPage(query)
          .then(response => {
            this.list = response.data.data.rows
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(error => {
            reject(error)
            this.listLoading = false
          })
      })
    }
  }
}
</script>
<style lang="scss">
.survey-main {
	padding: 10px;

	.main-search {
		background-color: #fff;
		padding: 0 10px;

		.svg-container {
			padding: 0 5px 0 10px;
			color: #bfced6;
			vertical-align: middle;
			display: inline-block;
		}

		.search-input {
			width: 60%;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				left: -25px;
				right: 0;
				bottom: 8px;
				height: 1px;
				background: rgba(226, 227, 232, 1);
			}

			input {
				outline: none;
				background: transparent;
				border: none;
				outline: medium;
				padding: 0;

				&:focus {
					outline: none;
					background-color: transparent;
				}
			}
		}

		.search-btn {
			display: inline-block;
			float: right;

			.el-button.is-round {
				padding: 10px 30px;
				margin-right: 34px;
			}

			.search-more {
				font-size: 14px;
				font-weight: 500;
				@include font-color($mainColor);
				cursor: pointer;
				margin-left: 10px;
			}
		}

		&.merge {
			height: 50px;
			line-height: 50px;
		}

		&.separate {
			.search-inner {
				padding-top: 10px;

				.search-inner-item {
					.item-label {
						height: 30px;
						line-height: 30px;
						font-size: 14px;
						color: #a6a6a6;
						font-weight: 400;
					}

					.el-input {
						position: relative;

						&.el-date-editor input {
							padding-left: 30px;
						}

						.el-input__inner {
							border: none;
							padding: 0;
						}

						&:after {
							content: '';
							height: 1px;
							background-color: #e2e3e8;
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
						}
					}
				}
			}

			.search-btn {
				text-align: center;
				display: block;
				float: none;
				height: 56px;
				line-height: 56px;
			}
		}
	}

	.main-buttons {
		display: flex;
		line-height: 36px;
		margin-top: 10px;

		.main-buttons-title {
			flex: 1;
			height: 36px;
			line-height: 36px;
			font-size: 16px;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
}
</style>
